<template>
  <el-dialog title="运单详情" width="800" :close-on-click-modal="false" :visible.sync="transportVisible">
    <el-form ref="courierform">
      <br>
      <el-row>
        <el-form-item class="el-col-8" prop="orderId" label="订单编号">
          <span id="orderId" v-model="details.orderId"></span>
        </el-form-item>
        <el-form-item class="el-col-8" prop="id" label="运单编号">
          <span id="id" v-model="details.id"></span>
        </el-form-item>
        <el-form-item prop="createTime" class="el-col-8" label="下单时间">
          <span id="createTime" v-model="details.order.createTime"></span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="status" class="el-col-8" label="订单状态">
          <span id="status" v-model="details.order.status"></span>
        </el-form-item>
        <el-form-item prop="estimatedArrivalTime" class="el-col-8" label="预计到达日期">
          <span id="estimatedArrivalTime" v-model="details.order.estimatedArrivalTime"></span>
        </el-form-item>
      </el-row>
      <br>

      <br>
      <el-timeline>
        <el-timeline-item timestamp="发货方" class="el-icon-map-location" placement="top">
          <el-card>
            <el-row>
              <el-form-item prop="senderName" class="el-col-8" label="发货方姓名">
                <span id="senderName" v-model="details.order.senderName"></span>
              </el-form-item>
              <el-form-item prop="senderssqaddress" class="el-col-8" label="发货方地址">
                <span id="senderssqaddress" v-model="details.order.senderssqaddress"></span>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="senderPhone" class="el-col-8" label="发货方电话">
                <span id="senderPhone" v-model="details.order.senderPhone"></span>
              </el-form-item>
              <el-form-item prop="senderAddress" class="el-col-8" label="详细地址">
                <span id="senderAddress" v-model="details.order.senderAddress"></span>
              </el-form-item>
            </el-row>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="收货方" class="el-icon-aim" placement="top">
          <el-card>
            <el-row>
              <el-form-item prop="receiverName" class="el-col-8" label="发货方姓名">
                <span id="receiverName" v-model="details.order.receiverName"></span>
              </el-form-item>
              <el-form-item prop="receiverssqaddress" class="el-col-8" label="发货方地址">
                <span id="receiverssqaddress" v-model="details.order.receiverssqaddress"></span>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="receiverPhone" class="el-col-8" label="发货方电话">
                <span id="receiverPhone" v-model="details.order.receiverPhone"></span>
              </el-form-item>
              <el-form-item prop="receiverAddress" class="el-col-8" label="详细地址">
                <span id="receiverAddress" v-model="details.receiverAddress"></span>
              </el-form-item>
            </el-row>
          </el-card>
          <el-row>
            <el-form-item prop="distance" align="left" class="el-col-8" label="距离">
              <span id="distance" v-model="details.order.distance"></span>
            </el-form-item>
            <el-form-item prop="senderaddress" class="el-col-8" label="查看地图">
              <span></span>
            </el-form-item>
          </el-row>
        </el-timeline-item>
      </el-timeline>

      <br>

      <el-row>
        <el-form-item prop="amount" class="el-col-8" label="运费">
          <span id="amount" v-model="details.order.amount"></span>
        </el-form-item>
        <el-form-item prop="paymentMethod" class="el-col-8" label="支付方式">
          <span id="paymentMethod" v-model="details.order.paymentMethod"></span>
        </el-form-item>
        <el-form-item prop="paymentStatus" class="el-col-8" label="支付状态">
          <span id="paymentStatus" v-model="details.order.paymentStatus"></span>
        </el-form-item>
      </el-row>

      <br>
      <el-table
        :data="dataorderdetailsList"
        border
        v-loading="dataorderdetailsListLoading"
        style="width: 100%;">
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="货品名称">
        </el-table-column>
        <el-table-column
          prop="quantity"
          header-align="center"
          align="center"
          label="货品数量">
        </el-table-column>
        <el-table-column
          prop="unit"
          header-align="center"
          align="center"
          label="货品单位">
        </el-table-column>
        <el-table-column
          prop="goodtype"
          header-align="center"
          align="center"
          label="货品类型">
          <tmplate slot-scope="scope">
            <span>{{ scope.row.status == 1 ? '待取件' : scope.row.status == 2 ? '已取件' : '' }}</span>
          </tmplate>
        </el-table-column>
        <el-table-column
          prop="weight"
          header-align="center"
          align="center"
          label="重量（千克）">
        </el-table-column>
        <el-table-column
          prop="volume"
          header-align="center"
          align="center"
          label="体积（方）">
        </el-table-column>
        <el-table-column
          prop="cargoValue"
          header-align="center"
          align="center"
          label="货值（元）">
        </el-table-column>
        <el-table-column
          prop="cargoBarcode"
          header-align="center"
          align="center"
          label="条形编码">
        </el-table-column>
        <el-table-column
          prop="remark"
          header-align="center"
          align="center"
          label="备注">
        </el-table-column>
      </el-table>

      <br>
      <el-row>
        <el-form-item prop="qagencyId" class="el-col-8" label="所在网点">
          <span id="qagencyId" v-model="details.taskpd.agencyId"></span>
        </el-form-item>
        <el-form-item prop="taskType" class="el-col-8" label="取件类型">
          <span id="taskType" v-model="details.taskpd.taskType"></span>
        </el-form-item>
        <el-form-item prop="qsignStatus" class="el-col-8" label="作业状态">
          <span id="qsignStatus" v-model="details.taskpd.signStatus"></span>
        </el-form-item>
        <el-form-item prop="qcourier" class="el-col-8" label="取件快递员">
          <span id="qcourier" v-model="details.taskpd.courier"></span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="qcphone" class="el-col-8" label="快递员电话">
          <span id="qcphone" v-model="details.taskpd.cphone"></span>
        </el-form-item>
        <el-form-item prop="qestimatedStartTime" class="el-col-8" label="预计取件时间">
          <span id="qestimatedStartTime" v-model="details.taskpd.estimatedStartTime"></span>
        </el-form-item>
        <el-form-item prop="qconfirmTime" class="el-col-8" label="取件完成时间">
          <span id="qconfirmTime" v-model="details.taskpd.confirmTime"></span>
        </el-form-item>
        <el-form-item prop="actualEndTime" class="el-col-8" label="实际完成时间">
          <span id="actualEndTime" v-model="details.taskpd.actualEndTime"></span>
        </el-form-item>
      </el-row>
      <br>
      <el-row>
        <el-form-item prop="pagencyId" class="el-col-8" label="所在网点">
          <span id="pagencyId" v-model="details.taskpd.agencyId"></span>
        </el-form-item>
        <el-form-item prop="psignStatus" class="el-col-8" label="作业状态">
          <span id="psignStatus" v-model="details.taskpd.signStatus"></span>
        </el-form-item>
        <el-form-item prop="pcourier" class="el-col-8" label="派件快递员">
          <span id="pcourier" v-model="details.taskpd.courier"></span>
        </el-form-item>
        <el-form-item prop="pcphone" class="el-col-8" label="快递员电话">
          <span id="pcphone" v-model="details.taskpd.cphone"></span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="pestimatedStartTime" class="el-col-9" label="预计派送时间">
          <span id="pestimatedStartTime" v-model="details.taskpd.estimatedStartTime"></span>
        </el-form-item>
        <el-form-item prop="pconfirmTime" class="el-col-9" label="派件完成时间">
          <span id="pconfirmTime" v-model="details.taskpd.confirmTime"></span>
        </el-form-item>
      </el-row>


    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取消</el-button>
    </div>
  </el-dialog>

</template>

<script src="src/api/work.js"></script>
<script>

import {getTransportOrderInfo} from '../../../api/work'

export default {
  data() {
    name: 'transportOrderDetail'
    return {
      transportVisible: false,
    }
  },
  mounted() {

  },
  methods:{
    orderinit(oid){
      this.transportVisible = true;
      getTransportOrderInfo(oid).then(({data}) => {
        this.details.id = data.transportOrder.id;
        this.details.orderId = data.transportOrder.orderId;
        this.details.order = data.transportOrder.order;
        this.details.ordercargo = data.transportOrder.ordercargo;
        this.details.taskpd = data.transportOrder.taskpd;
        console.log(data)
      })
    }
  }
}

/*

*  */
</script>
